<template>
	<view>
		<view class="spinner-container">
			<view class="spinner spinner--rotate-square-2">
			</view>
			<view class="site-title">
				{{ config.site_title ? config.site_title : 'loading...' }}
			</view>
		</view>

	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	export default {
		data() {
			return {

			}
		},
		computed: {
			...mapState(['config', 'num', 'userInfo', 'token','tabbar'])
		},
		watch: {
		    'config.site_title'(newValue, oldValue) {
					this.setIndexTabbar(this.config.home_template)
					console.log(this.tabbar)
					// #ifdef MP-WEIXIN
					uni.login({
						success: (res) => {
							console.log(res)
							this.$request('/api/Member/wxMpQuickLogin', 'POST', {
								code: res.code
							}).then(async rs => {
								console.log(rs)
								uni.setStorageSync('userInfo', rs.data)
								uni.setStorageSync('token', rs.token)
								rs.data.token = rs.token
								this.$store.commit('login', rs.data);
								uni.hideLoading()
								const launchOptions = uni.getLaunchOptionsSync()
								const query = launchOptions.query
								const share_m_id = query.share_m_id
								console.log('url中的share_m_id参数：', share_m_id)
								// 如果服务端校验是新用户且存在分享人id，那么调用奖励接口
								if (rs.data.is_new && share_m_id) {
									console.log('分享人id：', share_m_id)
									await this.$request('/api/Member/bindShareId', 'POST', {
										share_m_id: share_m_id
									})
									// then(ret => {
									// 	console.log(ret)
									// 	if (ret.status == 200) {
									// 		uni.showModal({
									// 			title: "温馨提示",
									// 			content: ret.msg
									// 		})
									// 	}
									// })
								}
								uni.reLaunch({
									url: this.config.home_template
								})
							}).catch(err => {
								uni.hideLoading()
								console.log(err)
								this.$failToast(err, 'error')
							})
						}
					})
					// #endif
					// #ifndef MP-WEIXIN
					uni.reLaunch({
						url: this.config.home_template
					})
					// #endif
					
		    }
		  },
		methods: {
			...mapMutations(['setIndexTabbar'])
		}
	}
</script>

<style lang="scss">
	.site-title {
		padding-top: 40rpx;
		font-size: 16px;
		color: #41b883;
	}
	.spinner-container {
		flex-direction: column;
		height: 100vh;
		width: 100vw;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.spinner {
		position: relative;
		width: 60px;
		height: 60px;
	}

	.spinner::before {
		content: "";
		width: 100%;
		height: 20%;
		min-width: 5px;
		background: #000;
		opacity: .1;
		position: absolute;
		bottom: 0;
		left: 0;
		border-radius: 50%;
		animation: rotate-square-2-shadow .5s linear infinite;
	}

	.spinner::after {
		content: "";
		width: 100%;
		height: 100%;
		background: #41b883;
		animation: rotate-square-2-animate .5s linear infinite;
		position: absolute;
		bottom: 40%;
		left: 0;
		border-radius: 3px;
	}

	@keyframes rotate-square-2-animate {
		17% {
			border-bottom-right-radius: 3px;
		}

		25% {
			transform: translateY(20%) rotate(22.5deg);
		}

		50% {
			transform: translateY(40%) scale(1, .9) rotate(45deg);
			border-bottom-right-radius: 50%;
		}

		75% {
			transform: translateY(20%) rotate(67.5deg);
		}

		100% {
			transform: translateY(0) rotate(90deg);
		}
	}

	@keyframes rotate-square-2-shadow {

		0%,
		100% {
			transform: scale(1, 1);
		}

		50% {
			transform: scale(1.2, 1);
		}
	}
</style>